<template>
  <div class="login-page">
    <div class="login-header">
      <img src="@/assets/logo.svg" class="logo"/>
      <h2 class="title">小程序管理平台</h2>
    </div>
    <div class="login-container">
      <h2 class="login-title">登录</h2>
      <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginForm"
          class="login-form"
          @submit.prevent="handleLogin"
      >
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              placeholder="用户名"
              clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              placeholder="密码"
              type="password"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              class="login-button"
              :loading="loading"
              @click="handleLogin"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>

      <div class="login-help">
        登录遇到问题？
        <a href="mailto:your-admin-email@example.com" >请联系您的管理员</a>
      </div>
    </div>
  </div>


</template>

<script>

import service from "@/utils/request";

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    async handleLogin() {
      this.loading = true;
      try {
        const response = await service.post(
            'admin/employee/login',
            {
              username: this.loginForm.username,
              password: this.loginForm.password
            },
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
        );
        console.log('登录响应：', response);
        // 直接使用 response.code，不需要 response.data.code
        if (response.code === 1) {  // 修改这里
            this.$message.success('登录成功');
            // 直接使用 response.data，不需要 response.data.data
            localStorage.setItem('token', response.data.token);  // 修改这里

            // 检查是否有重定向路径
            const redirectPath = this.$route.query.redirect;
            if (redirectPath) {
                // 如果有重定向路径，跳转到该路径
                this.$router.replace(redirectPath);
            } else {
                // 否则跳转到主页
                this.$router.replace('/main');
            }
        } else {
            this.$message.error(response.msg || '登录失败');  // 修改这里
        }
      } catch (error) {
        this.$message.error(error.response?.data?.msg || '登录接口请求失败');
        console.error(error);
      } finally {
        this.loading = false;
      }
    }

  }
};
</script>


<style scoped>
.login-page {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.logo {
  width: 109px;
  height: 39px;
}

.title {
  margin-left: 20px;
  width: 168px;
  height: 28px;

  font-family: PingFang SC;
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #333;
}

.login-container {
  text-align: center;
  padding: 2rem;
  background: #EEEAE9;
  border-radius: 16px;
  width: 400px;
  height: 460px;

}

.login-title {
  width: 72px;
  height: 34px;

  font-family: "PingFang SC";
  font-weight: 600;
  font-size: 36px;
  line-height: 28px;
  margin-bottom: 60px;

  color: #333;

}

.login-form :deep(.el-input__wrapper) {
  background-color: transparent; /* 背景透明 */
  box-shadow: none; /* 移除阴影 */
  border: none; /* 移除外部边框 */
  border-bottom: 2px solid #ccc; /* 添加下边框 */
  border-radius: 0; /* 去掉圆角 */
  padding: 0;
  transition: border-color 0.3s ease; /* 增加平滑过渡效果 */
}

.login-form :deep(.el-input__wrapper):hover {
  border-bottom: 2px solid #999; /* 鼠标悬停时加深颜色 */
}

.login-form :deep(.el-input__inner) {
  border: none; /* 去掉默认边框 */
  padding: 5px 0; /* 调整内边距 */
  border-radius: 0; /* 去掉圆角 */
  border-bottom: 2px solid #e3dcdb; /* 默认下边框颜色变深 */
  background-color: transparent; /* 背景透明 */
  font-size: 16px;
}

.login-form :deep(.el-input__inner:focus) {
  outline: none; /* 去掉默认的聚焦样式 */
  border-bottom: 2px solid #F5835C; /* 聚焦时下边框高亮 */
}

.login-button {
  width: 160px;
  height: 46px;
  border-radius: 23px 23px 23px 23px;
  padding: 12px 64px 12px 64px;
  margin-top: 20px;
  background: #F5835C;
  border-color: #F5835C;
}

.login-button:hover {
  background: #dd7653;
  border-color: #dd7653;
}

.login-help {
  margin-top: 7rem;
  font-size: 0.875rem;
  color: #333;
  text-decoration: none;
  text-align: left;

}

.login-help a:hover {
  color: #333;
}

.login-help a:focus {
  outline: none;
}

</style>